<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#receiver").blur(function(){
		$("#div_user").fadeIn();
		
	});
	
	$("#btn_close").click(function(){
		$("#div_user").fadeOut();
	});
	
	$.getJSON("getUser.do",{},function(data){
		var table=$("<table>");
		var tr=null;
		for(var i=0;i<data.length;i++){
			if(i%3==0){
				tr=$("<tr>");
				table.append(tr); 
			}
			var td=$("<td>");
			tr.append(td);
			var check=$("<input type='checkbox' name='userid'/>").val(data[i].userid);
			td.append(check);
			check.click(function(){
				var array=[];
				var c=$("input:checked");
				c.each(function(){
					array.push($(this).next().html());
				});
				$("#receiver").val(array.join(","));
			});
			var span=$("<span></span>").html(data[i].username);
			td.append(span);
		}
		$("#div1").html(table);
	});
	
	$("#btn_send").click(function(){
		$("form").submit();
	});
})
</script>
</head>
<body>
<form action="sendMessage.do" method="post" name="form">
<table>
<!-- 显示用户信息div -->
<div id="div_user"
style="display:none; position:absolute;left:100px;top:100px;background-color:gray;width:400px;height:250px">
	<div style="float:right;">
		<input type="button" id="btn_close" value="关闭"/>
	</div>
	<div style="clear:both" id="div1">
		
	</div>
</div>
<table>
<tr>
	<th>新建信息</th>
</tr>
</table>
<table>
<tr>
	<td>消息标题：</td>
	<td>
	<input type="text" name="messageTitle" id="title"/>
	</td>
</tr>

<tr>
	<td>接收者：</td>
	<td>
	<input type="text" name="receiver" id="receiver" readonly="readonly"/>
	</td>
	<td>
	<select name="priority">
		<option>选择等级</option>
		<option value=1>低级</option>
		<option value=2>中级</option>
		<option value=3>高级</option>
	</select>
	</td>
</tr>

<tr>
	<td>信息内容：</td>
	<td>
	<textarea name="messageContent" id="textarea" cols="80" rows="15"></textarea>
	</td>
</tr>

</table >

</table>
<table align="center">
<tr>
<td >
<input type="button" value="发送" id="btn_send" />
</td>
<td>
<input type="button" value="返回" id="btn_back"/>
</td>
</tr>
</table>
</form>
</body>
</html>